<template>
  <div class="dashboard-page">
      <div class="Statistics">
        <img class="number" src="@/assets/bac01.png" alt="" />
        <img class="pig" src="@/assets/bgcpig.png" alt="" />
        <div class="left">
          <div class="top">
            <span class="one">工单统计</span>
            <span class="two">{{form.firstDate}}~{{ form.nowDate}}</span>
          </div>
          <div class="bottom">
            <ul>
              <li>
                <div class="one">454</div>
                <div class="two">工单总数 (个)</div>
              </li>
              <li>
                <div class="one">0</div>
                <div class="two">完成工单 (个)</div>
              </li>
              <li>
                <div class="one">0</div>
                <div class="two">进行工单 (个)</div>
              </li>
              <li>
                <div class="one">454</div>
                <div class="two">取消工单 (个)</div>
              </li>
            </ul>
          </div>
        </div>
        <div class="right">
          <div class="top">
            <span class="one">销售统计</span>
            <span class="two">{{form.firstDate}}~{{ form.nowDate}}</span>
          </div>
          <div class="bottom">
            <ul>
              <li>
                <div class="one">{{orderCount}}</div>
                <div class="two">订单量 (个)</div>
              </li>
              <li>
                <div class="one">{{(orderAmount/10000).toFixed(2)}} </div>
                <div class="two">销售额 (万元)</div>
              </li>
            </ul>
          </div>
        </div>
      </div>

       <div class="list">
          <div class="top">
            <span class="one">商品热榜</span>
            <span class="two">{{form.firstDate}}~{{ form.nowDate}}</span>
          </div>
         <div class="goods" v-for="(item,index) in list " :key="index">
             <span>{{index + 1}}    {{item.skuName}}</span>
             <span> {{item.count}} 单</span>
         </div>
      </div>

       <div class="data">
         <div class="top">
            <span class="one">销售数据</span>
            <span class="two">{{form.firstDate}}~{{ form.nowDate }}</span>
          </div>
          <div class="then">
            <!-- 此处很重要 可以用插值表达式或者三元表达式都可以 -->
            <span @click="check1" :class="(isShow === 1 ? 'active': '')">周</span>
            <span @click="check2" :class="{active: isShow === 2}">月</span>
            <span @click="check3" :class="{active: isShow === 3}">年</span>
          </div>
          <div class="center">
            <span>销售额趋势图</span>
            <span class="two">销售额分布</span>
          </div>
            <div class="echarts">
            <div class="left" ref="box1"></div>
            <div class="right" ref="box2"></div>
            </div>

      </div>

       <div class="worktogether">
          <div class="top">
            <div class="one">合作商点位数Top5</div>
          </div>
           <div class="content">
             <div class="first" ref="box3"></div>
             <div class="second">
               <div class="one">
               <h2>{{ point }}</h2>
                 <span>点位数</span>
               </div>
               <div class="two">
               <h2>{{ togetherNumber }}</h2>
                 <span>点位数</span>
               </div>
             </div>
           </div>
      </div>

      <div class="equipment">
         <div class="top">
            <div class="one">异常设备监控</div>
          </div>
          <h2>无</h2>
      </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { goodsList, orderCount, orderAmount, workTogether, point, togetherNumber } from '@/api/user'
import moment from 'moment'
export default {
  name: 'LikedePcVueIndex',

  data () {
    return {
      list: [],
      flag: true, // ajax数据到达后为true, 开始渲染echart
      // 此处放一个对象传到Ajax里，直接传两个参数不太能实现
      form: {
        firstDate: '',
        nowDate: ''
      },
      isShow: '1',
      orderCount: '',
      orderAmount: '',
      hzlist: [],
      point: '',
      togetherNumber: ''

    }
  },

  async created () {
    // 调用一下getDate
    this.getDate()
    console.log(this.form)
    const res = await goodsList(this.form)
    // console.log(res)
    this.list = res
    const res1 = await orderCount(this.form)
    // console.log(res1)
    this.orderCount = res1
    const orderAmounts = await orderAmount(this.form)
    // console.log(orderAmounts)
    this.orderAmount = orderAmounts

    const Together = await workTogether()
    // console.log(Together)
    this.hzlist = Together
    console.log(this.hzlist)

    // 点数的渲染
    this.point = await point()

    // 合作供应商
    this.togetherNumber = await togetherNumber()
  },
  watch: {

    // if(this.$refs.box3) {
    //   this.eCharts()
    // }
  },
  mounted () {
    this.currentTime()
    const myChart1 = echarts.init(this.$refs.box1)
    const myChart2 = echarts.init(this.$refs.box2)
    const myChart3 = echarts.init(this.$refs.box3)
    myChart1.setOption({
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['星期一', '星期二', '星期三']
      },
      yAxis: {
        type: 'value'
      },
      visualMap: {
        type: 'piecewise',
        show: false,
        dimension: 0,
        seriesIndex: 0,
        pieces: [
          {
            gt: 0,
            lt: 9,
            color: 'rgba(0, 0, 180, 0.4)'
          }

        ]
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth: true,
          itemStyle: {
            normal: {
              color: '#a80000', // 改变折线点的颜色
              lineStyle: {
                color: '#a80000' // 改变折线颜色
              }
            }
          }
        }
      ]
    })

    myChart2.setOption({
      xAxis: {
        type: 'category',
        data: ['', '', '北京平', '', '霍营街', '', '']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: ['', '', 200, '', 50, ''],
          type: 'bar'
        }
      ]
    })

    myChart3.setOption({
      series: [
        {
          name: '合作商点位数Top5%',
          type: 'pie',
          radius: [50, 100],
          center: ['50%', '50%'],
          roseType: 'radius',
          itemStyle: {
            borderRadius: 8
          },
          data: [
            { value: 130, name: '金燕龙合作商 ' },
            { value: 30, name: '天华物业 ' },
            { value: 30, name: '北京合作商 ' },
            { value: 10, name: 'likede ' },
            { value: 10, name: '佳佳 ' }
          ]
          // data: this.hzlists
        }
      ]
    })
  },

  methods: {

    currentTime () {
      setInterval(this.getDate, 500)
    },
    getDate () {
      const _this = this
      const yy = new Date().getFullYear()
      const mm = new Date().getMonth() + 1
      const dd = new Date().getDate()
      _this.form.nowDate = yy + '-' + mm + '-' + dd
      this.form.firstDate = moment().startOf('month').format('YYYY-MM-DD')
    },
    // 先设置一个空值 isShow: '' 设置三个不同的点击事件 如果点让第一个字亮，则让isShow = 1,以此类推
    check1 () {
      this.isShow = 1
    },
    check2 () {
      this.isShow = 2
    },
    check3 () {
      this.isShow = 3
    },
    inEcharts () {
      const myChart1 = echarts.init(this.$refs.box1)
      const myChart2 = echarts.init(this.$refs.box2)
      const myChart3 = echarts.init(this.$refs.box3)
      myChart1.setOption({
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['星期一', '星期二', '星期三']
        },
        yAxis: {
          type: 'value'
        },
        visualMap: {
          type: 'piecewise',
          show: false,
          dimension: 0,
          seriesIndex: 0,
          pieces: [
            {
              gt: 0,
              lt: 9,
              color: 'rgba(0, 0, 180, 0.4)'
            }

          ]
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                color: '#a80000', // 改变折线点的颜色
                lineStyle: {
                  color: '#a80000' // 改变折线颜色
                }
              }
            }
          }
        ]
      })

      myChart2.setOption({
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: ['', '', 200, '', 50, ''],
            type: 'bar'
          }
        ]
      })

      myChart3.setOption({
        series: [
          {
            name: '合作商点位数Top5%',
            type: 'pie',
            radius: [50, 100],
            center: ['50%', '50%'],
            roseType: 'radius',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              { value: 130, name: '金燕龙合作商 62.5%' },
              { value: 30, name: '天华物业 12.5%' },
              { value: 30, name: '北京合作商 12.5%' },
              { value: 10, name: 'likede 6.25%' },
              { value: 10, name: '佳佳 6.25%' }
            ]
            // data: this.hzlist
          }
        ]
      })
    }
  },
  // 销毁定时器
  beforeDestroy () {
    if (this.getDate) {
      // console.log('销毁定时器')
      clearInterval(this.getDate) // 在Vue实例销毁前，清除时间定时器
    }
  }
}
</script>
<style lang="less" scoped>
 .top {
        margin-top: 15px;
        margin-left: 14px;
        .one {
          font-size: 14px;
          font-weight: 600;
        }
        .two {
          color: #adb2b8;
          font-size: 12px;
          margin-left: 8px;
        }
  }
 .Statistics {
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 870px;
    height: 150px;
    top: 80px;
    left: 160px;
    .number {
      position: absolute;
      top: 34px;
      left: 360px;
    }
    .pig {
      width: 120px;
      height: 90px;
      position: absolute;
      top: 60px;
      left: 734px;
    }
    // background-color: #f5f5f5;
    .left {
      height: 100%;
      width: 480px;
      border-radius: 17px;
      background-color: #e9f3ff;
      .bottom {
        ul {
          display: flex;
          justify-content: space-evenly;
          margin-top: 18px;
          li {
            list-style: none;
            z-index: 999;
            .one {
              font-size: 32px;
              font-weight: 600;
              color: #072074;
            }
            .two {
              font-size: 10px;
              color: #a8bbe5;
            }
          }
        }
      }
    }
    .right {
      height: 100%;
      width: 370px;
      border-radius: 17px;
      background-color: #fbefe8;
    }
    .bottom {
      ul {
        display: flex;
        justify-content: space-evenly;
        margin-top: 18px;
        li {
          list-style: none;
          z-index: 999;
          .one {
            font-size: 32px;
            font-weight: 600;
            color: #fe5757;
          }
          .two {
            font-size: 10px;
            color: #e2a39d;
          }
        }
      }
    }
  }

  .list {
    position: absolute;
    width: 332px;
    height: 560px;
    top: 80px;
    left: 1050px;
    border-radius: 17px;
    background-color: #f8fafd;
     .goods {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      padding: 10px 20px;
      font-size: 15px;
      color: #7b7b7b;
      }
  }

  .data {
     position: absolute;
     width: 870px;
     height: 386px;
     top: 254px;
     left: 160px;
     border-radius: 17px;
     background-color: #f8fafd;
      .then {
        display: flex;
        justify-content: space-evenly;
        position: absolute;
        height: 30px;
        width: 100px;
        top: 18px;
        left: 750px;
        line-height: 30px;
        border-radius:10px;
        font-weight: 400;
        font-size: 14px;
        color: #b6bcca;
        background-color:#f7fbff;
        span {
          cursor: pointer;
        }
        .active{
        text-align: center;
        width: 28px;
        height: 30px;
        font-weight: 600;
        color: black;
        border-radius: 4px;
        background-color: pink;
      }
      }
      .center {
        position: absolute;
        top: 70px;
        left: 190px;
        font-size: 14px;
        font-weight: 600;
        .two {
          margin-left: 380px;
        }
      }
      .echarts {
        display: flex;
        justify-content: space-around;
      .left{
        height: 340px;
        width: 410px;
        margin-top: 23px;
        margin-left: 44px;
      }
      .right {
        margin-top: 23px;
        height: 340px;
        width: 410px;
      }
      }

  }

  .worktogether {
     position: absolute;
     height: 386px;
     width: 680px;
     top: 666px;
     left: 160px;
     border-radius: 17px;
     margin-bottom: 30px;
     background-color: #f8fafd;
      .content {
        display: flex;
       .first {
         width: 380px;
         height: 380px;
       }
       .second {
         width: 100px;
         height: 200px;
         font-size: 14px;
         margin-left: 65px;
         padding-top: 30px;
         margin-top: 80px;
         border-radius: 17px;
         background-color: #f5f5f5;
         text-align: center;
         h2 {
           color: #072074;
         }
       }
      }
  }

  .equipment{
    position: absolute;
     height: 386px;
      width: 516px;
       top: 666px;
       left:865px;
       border-radius: 17px;
       background-color: #f8fafd;
       h2 {
         text-align: center;
         line-height: 300px;
       }
  }
</style>
